<template>
  <div class="user-wrapper">
    <div class="left">
      <div class="left-title">
        <span v-if="treeType === 'unit'"
          ><el-icon><HomeFilled /></el-icon>企业列表</span
        >
        <span v-else
          ><el-icon @click="handleBackUnit"><DArrowLeft /></el-icon
          >部门列表</span
        >
        <svg-icon name="refresh" size="17px" @click="handleNodeClick({})" />
      </div>
      <div class="left-list">
        <el-tree
          :data="departmentTreeData"
          :props="treeDefaultProps"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :default-expand-all="true"
        />
      </div>
    </div>
    <div class="custom-table-list-wrapper">
      <div class="search" :class="{ active: toggleSearchStatus }">
        <div class="search-left" ref="searchFromRef">
          <el-form class="search-form" inline>
            <!-- <el-form-item label="园区">
              <el-select
                class="search-select"
                v-model="searchParams.enable"
                placeholder="请选择"
                clearable
                multiple
              >
                <el-option
                  v-for="(item, index) of unitOptions"
                  :key="index"
                  :label="item.name"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="关键词">
              <el-input
                class="search-input"
                v-model="searchParams.keyword"
                placeholder="请输入车牌号码、单位、联系人"
                :suffix-icon="Search"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <a
            class="search-left-toggle"
            v-if="showToggle"
            @click="handleToggleSearch"
          >
            <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
            {{ toggleSearchStatus ? '收起' : '展开' }}
          </a>
        </div>
        <div class="search-right">
          <el-button type="primary" @click="initTableList(1)"
            ><svg-icon name="search" size="14px" />搜索</el-button
          >
          <el-button @click="handleResetCustom"
            ><svg-icon name="reset" size="17px" />重置</el-button
          >
        </div>
      </div>
      <div class="content">
        <!-- <div class="content-operate">
          <el-button type="primary" @click="handleAdd('新增园区车辆')"
            ><svg-icon name="add" size="15px" />新增车辆</el-button
          >
        </div> -->
        <div class="content-table">
          <el-table class="custom-table" :data="tableData">
            <el-table-column type="index" label="序号" width="60px" />
            <el-table-column prop="carNo" label="车牌号码" />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="parkName" label="所在园区" />
            <el-table-column prop="createTime" label="入库时间" />
            <!-- <el-table-column label="操作" width="120px"> -->
            <el-table-column label="操作" width="80px">
              <template #default="scope">
                <el-button link type="primary" @click="handleDetail(scope.row)"
                  >详情</el-button
                >
                <!-- <el-button link type="primary" @click="handleDetail(scope.row)"
                  >轨迹</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="content-page">
          <el-pagination
            class="custom-pagination"
            :current-page="paginationParams.pageIndex"
            :page-size="paginationParams.pageSize"
            background
            :page-sizes="[10, 20, 30, 50]"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="initTableList"
          />
        </div>
      </div>
    </div>
    <DetailDialog
      ref="detailRef"
      :detail="currentDetail"
      @close="handleClose"
    />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import DetailDialog from './detail.vue'
import { useTableList } from '@/hooks/useTableList'
import { ElMessage, ElMessageBox } from 'element-plus'
import { HomeFilled, DArrowLeft } from '@element-plus/icons-vue'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
import { getCarList } from '@/api/manager/dataManage/carManage.js'
import {
  getUnitList,
  getDepartmentList,
} from '@/api/manager/systemManage/user.js'
const searchParams = ref({
  type: '1',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getCarList)

const departmentTreeData = ref([])
const treeDefaultProps = ref({
  children: 'children',
  label: 'name',
})

const treeType = ref('unit')
const unitOptions = ref([])
const currentUnitName = ref('')
const initUnitTreeData = async () => {
  const res = await getUnitList()
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  unitOptions.value = res.data
  departmentTreeData.value = unitOptions.value
}
const initDepartmentTreeData = async (pkid) => {
  const res = await getDepartmentList({ unitId: pkid })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  departmentTreeData.value = res.data
}
const handleNodeClick = (val) => {
  if (treeType.value === 'unit') {
    searchParams.value.unitId = val.pkid
    searchParams.value.deptId = ''
    if (val.pkid) {
      initDepartmentTreeData(val.pkid)
      treeType.value = 'dept'
      currentUnitName.value = val.name
    }
  } else {
    searchParams.value.deptId = val.pkid
  }
  initTableList(1)
}
const handleBackUnit = () => {
  treeType.value = 'unit'
  searchParams.value.unitId = ''
  searchParams.value.deptId = ''
  departmentTreeData.value = unitOptions.value
  initTableList(1)
}

onMounted(() => {
  initUnitTreeData()
  initTableList(1)
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.user-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 350px;
    height: 100%;
    box-sizing: border-box;
    // border-right: 1px solid #d5deed;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px 0 0 4px;
    margin-right: 20px;
    // padding: 20px;
    &-title {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      border-bottom: 1px solid #d5deed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px 0 20px;
      span {
        font-size: 16px;
        font-weight: 500;
        color: #000000;
        display: flex;
        align-items: center;
      }
      .el-icon {
        color: #409eff;
        font-size: 18px;
        margin-right: 5px;
        cursor: pointer;
      }
      .svg-icon {
        cursor: pointer;
      }
    }
    &-list {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      box-sizing: border-box;
      padding: 20px;
    }
  }
  .custom-table-list-wrapper {
    width: calc(100% - 350px);
    .content-table {
      height: calc(100% - 50px);
    }
  }
}
</style>
